<template>
    <transition name="el-fade-in-linear">
        <div v-show="show">
            
            <el-row :gutter="20">

                <el-col :span=8>
                    <el-card>
                        <div slot="header">
                            <span style="margin-left:0px">词条编辑记录</span>
                        </div>

                        <el-table
                            :data="editRecords"
                            style="width: 100%"
                            height=337
                            border
                            highlight-current-row
                            @current-change="select"
                        >

                            <el-table-column
                                prop="username"
                                label="用户名"
                                width="100">
                            </el-table-column>

                            <el-table-column
                                prop="title"
                                label="编辑词条">
                            </el-table-column>

                            <el-table-column
                                prop="operation"
                                label="操作">

                                <template slot-scope="scope">
                                                <el-button
                                                size="mini"
                                                type="primary"
                                                @click="accept(scope.row)"><i class="el-icon-check"></i></el-button>

                                                <el-popconfirm 
                                                    :title='"确认拒绝该提交 ?"'
                                                    icon='el-icon-warning'
                                                    icon-color='red'
                                                    @confirm='refuse(scope.row.username + "_" + scope.row.title, scope.$index)'>
                                                <el-button
                                                    size="mini"
                                                    type="danger"
                                                    slot="reference"
                                                    style="margin-left:2%"
                                                >
                                                    <i class="el-icon-close"></i>

                                                </el-button>
                                                </el-popconfirm>
                                                
                                            </template>

                            </el-table-column>

                        </el-table>

                    </el-card>
                </el-col>

                <!-- <el-col :span=8>
                    <el-card>
                        <mavon-editor
                            v-model="oldArticle"
                            :toolbarsFlag="false"
                            :editable="false"
                            :subfield="false"
                            :defaultOpen="'preview'"
                        />
                    </el-card>
                </el-col> -->

                

                <el-col :span=16>
                    <el-card style="height:434.8px">
                        <div style="height:394.8px">
                            <mavon-editor
                            class="newV"
                            v-model="newStr"
                            :toolbarsFlag="false"
                            :editable="false"
                            :subfield="false"
                            :defaultOpen="'preview'"
                        />
                        </div>
                        
                    </el-card>
                </el-col>

            </el-row>

            <el-row>

                <el-col :span=24>
                    <el-card style="margin-top:15px">
                        <div style="width:100%;">
                            <code-diff id="codediff" outputFormat="side-by-side" :old-string="oldStr" :new-string="newStr" :context="10" />
                        </div>
                    </el-card>
                </el-col>

            </el-row>

        </div>
    </transition>
</template>

<script>
import request from '@/api/client'

export default {
    name: 'Check',
    data() {
        return {
            show: false,
            editRecords: [],
            oldStr: '',
            newStr: ''
        }
    },
    mounted() {
        this.show = true
        request.getEditRecords().then(resp => {
            this.editRecords = resp.data.data.records;
        })
    },
    methods: {
        select(currRow) {
            let editName = currRow.username + '_' + currRow.title
            request.getDiff(editName).then(resp => {
                this.oldStr = resp.data.data.oldArticle
                this.newStr = resp.data.data.newArticle
                console.log(this.oldStr)
                console.log(this.newStr)
            })
        },

        accept(edit) {
            request.acceptEdit(edit).then(resp => {
                this.$message({
                    message: '已接受 ' + edit.username + ' 提交的对"' + edit.title + '"的编辑',
                    type: 'success'
                });
                this.oldStr = ''
                this.newStr = ''
                for(let i = 0; i < this.editRecords.length; i++) {
                    if(this.editRecords[i].title == edit.title) {
                        this.editRecords.splice(i, 1)
                    }
                }
            })
        },

        refuse(title, index) {
            console.log(title + index)
            request.deleteArticle(title).then(resp => {
                // let s = title.substring(title.lastIndexOf("_") + 1, title.lengh)
                // for(let i = 0; i < this.editRecords.length; i++) {
                //     if(this.editRecords[i].title == s) {
                //         this.editRecords.splice(i, 1);
                //     }
                // }
                this.editRecords.splice(index, 1)

            })
        }

    }
}
</script>

<style>

.newV {
    height: 100%;
}

/* #codediff .hljs {
    padding: 0px;
} */

</style>